<template>
	<view class="contents">
		<view class="top bg-white">
			<view class="tops">
				<view class="top_list text-center flexs1">
					<view class="top_lista" @click="classXz(item.id)" v-for="(item, index) in category_one" :key="index">
						<image class="top_list_img" :src="urls+item.image"></image>
						<view class="top_list_tit" :class="xzStus == item.id?'colors':''">{{item.name}}</view>
					</view>
				</view>
				<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
					<view class="cu-item" :class="item.id==TabCur?'text-green cur':''" v-for="(item,index) in category_two" :key="index"
					 @click="tabSelect(item.id)" :data-id="index">
						{{item.name}}
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="content">
			<scroll-view class="foods-wrapper" scroll-y :style="'height:'+height+'px'" :scroll-top="foodSTop">
				<view ref="foodsWrapper" class="foods">
					<view ref="foodList" class="food" v-for="(food, index) in goodslist" :key="index">
						<image :src="urls+food.image" mode="" @click="addCart(food)" style="width: 75px;height: 75px;margin-top: 6px;"></image>
						<view class="food-info">
							<text class="food_name">{{food.name}}</text>
							<text class="food-price">￥{{food.price}}</text>
						</view>
						<view v-if="food.count" class="shuliang">{{food.count}}</view>
						<!-- <cartcontrol class="bors" :food="food" @add="addCart" @dec="decreaseCart"></cartcontrol> -->
					</view>
				</view>
			</scroll-view>
			<shopcart :quanP="quanP" :goods="allgoodslist" @add="addCart" @dec="decreaseCart" @delAll="delAll" @allgoods='allgoods' @yuyue='yuyue'></shopcart>
		</view>
	</view>
</template>

<script>
	import shopcart from '@/components/shopcart.vue';
	import cartcontrol from '@/components/cartcontrol.vue'
	import Vue from 'vue'
	export default {

		data() {
			return {
				xzStus: 0, //顶部点击字体变色
				modalName: null,
				TabCur: 0,
				scrollLeft: 0,
				goods: [{

						"name": "南瓜粥",
						"price": 9.22,
						"oldPrice": "",
						"description": "食材：大米，南瓜",
						"sellCount": 229,
						"img": '../../static/nanguaz.jpg'

					}, {
						"name": "小米粥1",
						"price": 9.8,
						"oldPrice": "",
						"description": "食材：小米",
						"sellCount": 239,
						"img": '../../static/xiaomi.jpg'

					},
					{
						"name": "油条1",
						"price": 1.88,
						"oldPrice": "",
						"description": "食材：油条",
						"sellCount": 229,
						"img": '../../static/youtiao.jpg'

					}, {
						"name": "小米粥2",
						"price": 9.8,
						"oldPrice": "",
						"description": "食材：小米",
						"sellCount": 239,
						"img": '../../static/xiaomi.jpg'

					},
					{
						"name": "油条2",
						"price": 1.88,
						"oldPrice": "",
						"description": "食材：油条",
						"sellCount": 229,
						"img": '../../static/youtiao.jpg'

					}, {
						"name": "小米粥3",
						"price": 9.8,
						"oldPrice": "",
						"description": "食材：小米",
						"sellCount": 239,
						"img": '../../static/xiaomi.jpg'

					},
					{
						"name": "油条3",
						"price": 1.88,
						"oldPrice": "",
						"description": "食材：油条",
						"sellCount": 229,
						"img": '../../static/youtiao.jpg'

					}
				],
				urls: this.$common.baseUrl,
				height: 0,
				foodSTop: 0,
				currentIndex: 0,
				category_id: '',
				category_one: [],
				category_two: [],
				goodslist: [],
				allgoodslist:[],
				quanP:0,
				id:''

			}
		},
		components: {
			shopcart,
			cartcontrol
		},
		onLoad(option) {
			uni.setNavigationBarTitle({
			    title: option.title
			})
			this.height = Number(uni.getSystemInfoSync().windowHeight) - 55;
			this.category_id = option.category_id;
			if(option.TabCur){
				this.TabCur = option.TabCur;
			}
			this.xzStus = option.category_id;
			this.initdate();
			this.getallgood();
			this.categorylist(this.category_id);
		},

		computed: {
			getList() {
				let result = [];
				this.goods.forEach((good) => {
					if (good.count) {
						result.push(good)
					}
				})
				return result

			},
			// 获得购物车所有商品数量
			getAllCount: function(item) {
				let result = [];
				let count = 0;
				for (let i = 0; i < this.goodslist.length; i++) {
					count = 0;
					if (this.goodslist[i].count >= 0) {
						count += this.goodslist[i].count
						Vue.set(this.goodslist[i], 'count', count)
					}
					result.push(count)
				}

				result.sort(function(a, b) {
					return a - b;
				})
				count = result[result.length - 1]
				return count;
			},

		},
		onShow() {
		},
		methods: {
			yuyue(e){
				if(e==1){
					this.goyuyue();
				}
			},
			allgoods(e){
				if(e==1){
					this.getallgood();
				}
			},
			goyuyue(){
				uni.navigateTo({
					url:'../downorder/downorder?user_coupons_id='+this.id
				})
			},
			//获取第一层
			initdate() {
				var obj = {
					type: 0
				}
				this.$common.requests('/api/Shop/categorylist', obj).then(res => {
					if (res.data.code == 1) {
						this.category_one = res.data.data;
					} else {
						this.$api.msg(res.data.msg)
					}
				})
			},
			categorylist(id) {
				var obj = {
					type: id
				}
				this.$common.requests('/api/Shop/categorylist', obj).then(res => {
					if (res.data.code == 1) {
						this.category_two = res.data.data;
						// if(this.TabCur == 0){
							this.TabCur = res.data.data[0].id
						// }
						this.getgoodlist(this.TabCur);
					} else {
						this.$api.msg(res.data.msg)
					}
				})
			},
			classXz(num) {
				this.xzStus = num;
				this.categorylist(num);
			},
			tabSelect(id) {
				this.TabCur = id;
				// this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				this.getgoodlist(id);
			},
			//获取商品信息
			getgoodlist(category_id) {
				var obj = {
					category_id: category_id
				}
				this.$common.requests('/api/Shop/goodlist', obj).then(res => {
					if (res.data.code == 1) {
						this.goodslist = res.data.data;
					} else {
						this.$api.msg(res.data.msg)
					}
				})
			},
			getallgood(){
				this.$common.requests('/api/Shop/getallgood').then(res => {
					if (res.data.code == 1) {
						this.allgoodslist = res.data.data;
					} else {
						this.$api.msg(res.data.msg)
					}
				})
			},
			addCart: function(item) {
				if (item.count >= 0) {
					item.count++
					this.goodslist.forEach((good) => {
						if (item.name == good.name)
							good.count = item.count
					})

				} else {
					console.log('add')
					this.goodslist.forEach((good) => {
						if (item.name == good.name)
							Vue.set(good, 'count', 1)
					})
				}
				//请求接口加购物车
				var obj = {
					good_id: item.id
				}
				this.$common.requests('/api/Shop/addshopcar', obj).then(res => {
					if (res.data.code == 1) {
						this.$api.msg(res.data.msg)
						this.getallgood();
					} else {
						this.$api.msg(res.data.msg)
					}
				})

			},
			decreaseCart(item) {
				if (item.count) {
					item.count--
					this.goodslist.forEach((good) => {
						if (item.name == good.name)
							good.count = item.count
					})
				}
				var obj = {
					good_id: item.id
				}
				this.$common.requests('/api/Shop/delshopcar', obj).then(res => {
					if (res.data.code == 1) {
						this.$api.msg(res.data.msg)
						this.getallgood();
					} else {
						this.$api.msg(res.data.msg)
					}
				})
			},
			// 清空购物车
			delAll() {
				this.goodslist.forEach((good) => {
					if (good.count) {
						good.count = 0
					}
				})
			}
		}
	}
</script>

<style>
	.contents {
		width: 100%;
		height: 100vh;
		background: #F9F9F9;
		border-top: 1px solid #E6E6E6;
		font-size: 30upx;
	}

	.top {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
	}

	.tops {
		padding: 30upx 30upx 0 30upx;
	}

	.top_lista {
		width: 25%;
	}

	.top_list_img {
		width: 90upx;
		height: 90upx;
		margin-bottom: 10upx;
	}

	.cu-item {
		padding: 0 !important;
		margin-top: 20upx;
	}

	.colors {
		color: #14C7CE;
	}

	.text-green {
		color: #FDB212;
	}

	.shuliang {
		position: absolute;
		top: 0;
		right: 0;
		background: #FDB212;
		color: #FFFFFF;
		border-radius: 50%;
		padding: 1upx 10upx 3upx 10upx;
	}

	.bot_right {
		width: 40%;
		color: #FFFFFF;
		background: #14C7CE;
		height: 100%;
	}


	.content {
		display: flex;
		position: fixed;
		top: 300upx;
		width: 100%;
		height: 66%;
		left: 0;
		padding: 0 20upx;
	}

	.current {
		position: relative;
		z-index: 0;
		background-color: #fff;
		color: #00A0DC;
		padding: 0 30upx;

	}


	.menu-item {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 50px;
	}


	.foods-wrapper {
		width: 100%;
		height: 100%!important;
		overflow-y: scroll;
	}

	.foods {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.food {
		width: 32%;
		text-align: center;
		background: #FFFFFF;
		position: relative;
		padding: 20upx;
		border-radius: 20upx;
		margin-bottom: 20upx;
	}

	.food-btm,
	.content {
		display: flex;
		flex-direction: row;
	}

	.food-title {
		padding: 2px 0;
	}

	.food-info {
		margin-left: 10px;
		margin-right: 16px;
		display: flex;
		flex-direction: column;
		flex: 2;
		font-size: 28upx;
	}

	.food_name {
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
		padding: 10upx 0;
	}

	.food-btm {
		justify-content: space-between;

	}

	.food-price {
		color: #f01414;
		font-size: 16px;
	}

	.bors {
		border: 1px solid red;
	}
</style>
